<template>
  <div>
    <search-form @search="getTableData" @reset="clearSearch">
      <el-col :span="8" :xs="24" v-show="$permiss[1463]">
        <el-form-item :label="$t('所属租户')">
          <el-select style="width: 100%" v-model="page.tenantId" @change="tenantChange">
            <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('APP名称')" v-show="$permiss[1464]">
          <el-select style="width: 100%" v-model="page.productName" clearable>
            <el-option v-for="item in productList" :key="item.productId" :label="item.appName"
                       :value="item.productName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-show="$permiss[1465]">
        <el-form-item :label="$t('客群名称')">
          <el-select style="width: 100%" v-model="page.guestGroupId" @change="guestGroupChange">
            <el-option v-for="item in guestGroupList" :key="item.guestGroupId" :label="item.guestGroupName"
                       :value="item.guestGroupId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-show="$permiss[1466]">
        <el-form-item :label="$t('经理名称')">
          <el-select style="width: 100%"
                     v-model="page.managerId" clearable filterable @change="managerChange">
            <el-option v-for="item in managerList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-show="$permiss[1467]">
        <el-form-item :label="$t('催收员')">
          <el-select style="width: 100%" v-model="page.adminUserId" clearable filterable>
            <el-option v-for="item in collectionUser" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('日期')">
          <el-date-picker
              v-model="page.timeValue"
              style="width: 100%"
              type="daterange"
              unlink-panels
              range-separator="~"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </search-form>
    <el-card shadow="never" style="margin-top: 10px">
      <el-alert :title="$t('该报表以订单维度展示催回率')" style="margin-bottom: 15px;width: 250px" :closable="false" show-icon
                type="info"></el-alert>
      <Table border :table-column="tableColumn" :loading="loading" @handleSizeChange="handleSizeChange"
             @handleCurrentChange="handleCurrentChange" :table-data="tableData" :page="page" max-height="700">
        <template slot="t7Rate" slot-scope="{row}">
          <span v-html="reduceRate(row.t7Rate,row.t06Rate)"></span>
        </template>
        <template slot="t8Rate" slot-scope="{row}">
          <span v-html="reduceRate(row.t8Rate,row.t7Rate)"></span>
        </template>
        <template slot="t9Rate" slot-scope="{row}">
          <span v-html="reduceRate(row.t9Rate,row.t8Rate)"></span>
        </template>
        <template slot="t10Rate" slot-scope="{row}">
          <span v-html="reduceRate(row.t10Rate,row.t9Rate)"></span>
        </template>
        <template slot="t11Rate" slot-scope="{row}">
          <span v-html="reduceRate(row.t11Rate,row.t10Rate)"></span>
        </template>
        <template slot="t12Rate" slot-scope="{row}">
          <span v-html="reduceRate(row.t12Rate,row.t11Rate)"></span>
        </template>
        <template slot="t13Rate" slot-scope="{row}">
          <span v-html="reduceRate(row.t13Rate,row.t12Rate)"></span>
        </template>
        <template slot="t14Rate" slot-scope="{row}">
          <span v-html="reduceRate(row.t14Rate,row.t13Rate)"></span>
        </template>
        <template slot="t15Rate" slot-scope="{row}">
          <span v-html="reduceRate(row.t15Rate,row.t14Rate)"></span>
        </template>
        <template slot="t16Rate" slot-scope="{row}">
          <span v-html="reduceRate(row.t16Rate,row.t15Rate)"></span>
        </template>
        <template slot="t17Rate" slot-scope="{row}">
          <span v-html="reduceRate(row.t17Rate,row.t16Rate)"></span>
        </template>
        <template slot="t18Rate" slot-scope="{row}">
          <span v-html="reduceRate(row.t18Rate,row.t17Rate)"></span>
        </template>
        <template slot="t19Rate" slot-scope="{row}">
          <span v-html="reduceRate(row.t19Rate,row.t18Rate)"></span>
        </template>
        <template slot="t2023Rate" slot-scope="{row}">
          <span v-html="reduceRate(row.t2023Rate,row.t19Rate)"></span>
        </template>
      </Table>
    </el-card>
  </div>
</template>

<script>
import {collectionTimeShare, guestGroupList, guestGroupBindList} from '@/api/postLoan'
import {dateFormatSection, defaultTimeDate} from "@/utils/tools";
import {selectManager, selectProduct, selectTenant} from "@/api/system";

export default {
  name: "loanReportCollectionRealTime",
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        timeValue: defaultTimeDate(7)
      },
      guestGroupList: [],
      exportsLoading: false,
      tenantList: [],
      collectionUser: [],
      managerList: [],
      productList: [],
      tableData: [],
      tableColumn: [
        {label: this.$t('时间'), prop: 'dateStr', align: 'center', minWidth: 100, fixed: 'left'},
        {label: '0-6', prop: 't06Rate', align: 'center', minWidth: 100},
        {label: '7', prop: 't7Rate', align: 'left', minWidth: 120, slot: 't7Rate'},
        {label: '8', prop: 't8Rate', align: 'left', minWidth: 120, slot: 't8Rate'},
        {label: '9', prop: 't9Rate', align: 'left', minWidth: 120, slot: 't9Rate'},
        {label: '10', prop: 't10Rate', align: 'left', minWidth: 120, slot: 't10Rate'},
        {label: '11', prop: 't11Rate', align: 'left', minWidth: 120, slot: 't11Rate'},
        {label: '12', prop: 't12Rate', align: 'left', minWidth: 120, slot: 't12Rate'},
        {label: '13', prop: 't13Rate', align: 'left', minWidth: 120, slot: 't13Rate'},
        {label: '14', prop: 't14Rate', align: 'left', minWidth: 120, slot: 't14Rate'},
        {label: '15', prop: 't15Rate', align: 'left', minWidth: 120, slot: 't15Rate'},
        {label: '16', prop: 't16Rate', align: 'left', minWidth: 120, slot: 't16Rate'},
        {label: '17', prop: 't17Rate', align: 'left', minWidth: 120, slot: 't17Rate'},
        {label: '18', prop: 't18Rate', align: 'left', minWidth: 120, slot: 't18Rate'},
        {label: '19', prop: 't19Rate', align: 'left', minWidth: 120, slot: 't19Rate'},
        {label: '20-23', prop: 't2023Rate', align: 'left', minWidth: 120, slot: 't2023Rate'},
      ],
      loading: false,
      selectDate: null,
      pickerOptions: {
        onPick: ({maxDate, minDate}) => {
          this.selectDate = minDate.getTime()
          if (maxDate) {
            this.selectDate = null
          }
        },
        disabledDate: (time) => {
          // 最大可以选择前后31天时间
          if (this.selectDate !== null) {
            const dayNum = 30 * (24 * 60 * 60 * 1000)
            const minTime = this.selectDate - dayNum
            const maxTime = this.selectDate + dayNum
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      }
    }
  },
  async mounted() {
    const p2 = await selectTenant().then(res => {
      this.tenantList = res.data
      if (this.tenantList.length > 0) this.$set(this.page, 'tenantId', this.tenantList[0].adminUserId)
    })
    // 获取客群名称
    const p1 = await guestGroupList({
      pageNum: 1,
      pageSize: 1000,
      type: 1,
      tenantId: this.page.tenantId
    }).then(res => {
      const {list} = res.data
      this.guestGroupList = list || []
      if (this.guestGroupList.length > 0) this.$set(this.page, 'guestGroupId', this.guestGroupList[0].guestGroupId)
    })
    selectProduct().then(res => {
      this.productList = res.data
    })
    //  催收员
    this.$permiss[1467] && guestGroupBindList({
      pageSize: 100,
      adminRole: 7,
    }).then(res => {
      this.collectionUser = res.data.list
    })
    // 经理姓名
    this.$permiss[1465] && guestGroupBindList({
      adminRole: 6,
    }).then(res => {
      this.managerList = res.data.list
    })
    Promise.all([p1, p2]).then(res => {
      this.getTableData()
    })

  },
  methods: {
    async getTableData() {
      const [dateStart, dateEnd] = dateFormatSection(this.page.timeValue)
      const params = {
        ...this.page,
        dateStart, dateEnd,
        timeValue: undefined,
      }
      this.loading = true
      const res = await collectionTimeShare(params)
      if (res.code === 1) {
        const {list, total} = res.data
        if (list) {
          this.tableData = list.list
          if (this.tableData.length > 0 && total) {
            this.tableData.unshift({
              ...total,
              dateStr: this.$t('合计')
            })
          }
          this.page.total = list.total
        } else {
          this.tableData = []
        }
        this.loading = false
      } else {
        this.loading = false
      }
    },
    // 计算增长率
    reduceRate(currentValue, previousValue) {
      // 当前值
      const cur = parseFloat(currentValue.replace('%', '')).toFixed(2)
      // 前一个值
      const pre = parseFloat(previousValue.replace('%', '')).toFixed(2)
      const upValue = (cur - pre).toFixed(2)
      /**
       *
       * @param curValue 当前值
       * @param upValue 增长值
       * @param trend up: 涨   flat:平
       * @return {string}
       */
      const formatText = (curValue, upValue, trend) => {
        const up = trend === 'up'
        return `
        <div style="font-size:14px;position:relative;">${curValue}%
               <div style="color:${up ? 'red' : 'gray'};font-size:8px;position:absolute;top: -6px;right: -6px" >+${upValue <= 0 ? '0.00' : upValue}%</div>
        </div>
        </div>
      `
      }
      if (upValue > 0) {
        return formatText(cur, upValue, 'up')
      } else {
        return formatText(cur, upValue, 'flat')
      }
    },
    tenantChange(value) {
      this.$permiss[1465] && guestGroupList({
        pageNum: 1,
        pageSize: 1000,
        type: 1,
        tenantId: value
      }).then(res => {
        const {list} = res.data
        this.$set(this.page, 'guestGroupId', null)
        this.guestGroupList = list || []
      })
      selectProduct({adminUserId: value}).then(res => {
        this.productList = res.data
        this.$set(this.page, 'productName', null)
      })
    },
    guestGroupChange(value) {
      // 经理姓名
      this.$permiss[1465] && guestGroupBindList({
        adminRole: 6,
        pageSize: 100,
        guestGroupId: value
      }).then(res => {
        if (res.code === 1) {
          this.$set(this.page, 'managerId', null)
          this.managerList = res.data.list
        }
      })
    },
    managerChange(value) {
      //  催收员
      guestGroupBindList({
        pageSize: 100,
        adminRole: 7,
        managerId: value
      }).then(res => {
        this.$set(this.page, 'adminUserId', null)
        this.collectionUser = res.data.list
      })
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    clearSearch() {
      this.page = {
        ...this.page,
        pageNum: 1,
        pageSize: 10,
        total: 0,
        productName: null,
        managerId: null,
        adminUserId: null,
      }
      this.getTableData()
    }
  }
}
</script>

<style scoped>

</style>
